<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elevy管理 - 旅行社系统</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div id="app">
        <div class="container-fluid">
            <div class="row">
                <sidebar-nav current-page="elevy" @logout="handleLogout"></sidebar-nav>

                <!-- 主内容区 -->
                <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                        <h1 class="h2">Elevy管理</h1>
                        <div class="btn-toolbar mb-2 mb-md-0">
                            <button class="btn btn-primary" @click="showCreateModal">
                                <i class="bi bi-plus"></i> 新增Elevy
                            </button>
                        </div>
                    </div>

                    <!-- 搜索栏 -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <input type="text" class="form-control" v-model="searchQuery" placeholder="搜索订单号/客户名称...">
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-secondary" @click="loadElevyList">
                                <i class="bi bi-search"></i> 搜索
                            </button>
                        </div>
                    </div>

                    <!-- Elevy列表 -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>订单编号</th>
                                    <th>订单标题</th>
                                    <th>客户名称</th>
                                    <th>客户电话</th>
                                    <th>订单金额</th>
                                    <th>出发日期</th>
                                    <th>Elevy编号</th>
                                    <th>Elevy金额</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item in elevyList" :key="item.ID">
                                    <td>{{ item.ReferenceNo }}</td>
                                    <td>{{ item.package_order_title }}</td>
                                    <td>{{ item.customer_name }}</td>
                                    <td>{{ item.customer_phone }}</td>
                                    <td>{{ formatPrice(item.package_order_total_amount) }}</td>
                                    <td>{{ formatDate(item.dep_date) }}</td>
                                    <td>{{ item.ElevyStampNo }}</td>
                                    <td>{{ formatPrice(item.ElevyStampAmount) }}</td>
                                    <td>
                                        <span :class="getStatusBadgeClass(item.ElevyStampStatus)">
                                            {{ item.ElevyStampStatus }}
                                        </span>
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-info me-1" 
                                                @click="viewElevy(item)"
                                                v-if="item.ElevyStampUrl">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                        <button class="btn btn-sm btn-danger" 
                                                @click="handleRefund(item)"
                                                v-if="canRefund(item)">
                                            退款
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 新增Elevy模态框 -->
                    <div class="modal fade" id="createElevyModal" tabindex="-1">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">新增Elevy</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <form @submit.prevent="handleCreate">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">订单ID</label>
                                                <input type="number" class="form-control" v-model="newElevy.package_order_id" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">订单标题</label>
                                                <input type="text" class="form-control" v-model="newElevy.package_order_title" required>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">订单编号</label>
                                                <input type="text" class="form-control" v-model="newElevy.ReferenceNo" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">客户名称</label>
                                                <input type="text" class="form-control" v-model="newElevy.customer_name" required>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">客户电话</label>
                                                <input type="text" class="form-control" v-model="newElevy.customer_phone" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">订单金额</label>
                                                <input type="number" class="form-control" v-model="newElevy.package_order_total_amount" required>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">出发日期</label>
                                                <input type="datetime-local" class="form-control" v-model="newElevy.dep_date" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">Elevy编号</label>
                                                <input type="text" class="form-control" v-model="newElevy.ElevyStampNo" required>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">工作区简称</label>
                                                <input type="text" class="form-control" v-model="newElevy.WorkAreaShortName" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">工作区许可证号</label>
                                                <input type="text" class="form-control" v-model="newElevy.WorkAreaLicNo" required>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">Elevy金额</label>
                                                <input type="number" class="form-control" v-model="newElevy.ElevyStampAmount" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">创建时间</label>
                                                <input type="datetime-local" class="form-control" v-model="newElevy.ElevyStampCreateTime" required>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">Elevy URL</label>
                                                <input type="text" class="form-control" v-model="newElevy.ElevyStampUrl">
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">状态</label>
                                                <select class="form-select" v-model="newElevy.ElevyStampStatus" required>
                                                    <option value="active">活跃</option>
                                                    <option value="pending">待处理</option>
                                                    <option value="refunded">已退款</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">退款时间</label>
                                                <input type="datetime-local" class="form-control" v-model="newElevy.RefundTime">
                                            </div>
                                        </div>
                                        <div class="text-end">
                                            <button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal">取消</button>
                                            <button type="submit" class="btn btn-primary">提交</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="js/api/config.js"></script>
    <script src="js/api/auth.js"></script>
    <script src="js/components/Sidebar.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                elevyList: [],
                searchQuery: '',
                newElevy: {
                    package_order_id: 0,
                    package_order_title: '',
                    ReferenceNo: '',
                    customer_name: '',
                    customer_phone: '',
                    package_order_total_amount: 0,
                    dep_date: '',
                    ElevyStampNo: '',
                    WorkAreaShortName: '',
                    WorkAreaLicNo: '',
                    ElevyStampAmount: 0,
                    ElevyStampCreateTime: '',
                    ElevyStampUrl: '',
                    ElevyStampStatus: 'pending',
                    RefundTime: ''
                },
                createModal: null
            },
            created() {
                this.loadElevyList();
            },
            mounted() {
                this.createModal = new bootstrap.Modal(document.getElementById('createElevyModal'));
            },
            methods: {
                async loadElevyList() {
                    try {
                        const response = await window.apiClient.get('/api/elevy-stamps/', {
                            params: {
                                search: this.searchQuery
                            }
                        });
                        this.elevyList = response.data;
                    } catch (error) {
                        console.error('加载Elevy列表失败:', error);
                        alert('加载Elevy列表失败');
                    }
                },
                formatPrice(price) {
                    return Number(price).toLocaleString('zh-CN', {
                        style: 'currency',
                        currency: 'CNY'
                    });
                },
                formatDate(date) {
                    return new Date(date).toLocaleDateString('zh-CN');
                },
                getStatusBadgeClass(status) {
                    return {
                        'badge bg-success': status === 'active',
                        'badge bg-danger': status === 'refunded',
                        'badge bg-warning': status === 'pending'
                    };
                },
                showCreateModal() {
                    this.createModal.show();
                },
                async handleCreate() {
                    try {
                        await window.apiClient.post('/api/elevy-stamps/', this.newElevy);
                        this.createModal.hide();
                        this.loadElevyList();
                        this.resetNewElevy();
                    } catch (error) {
                        console.error('创建Elevy失败:', error);
                        alert('创建Elevy失败');
                    }
                },
                resetNewElevy() {
                    this.newElevy = {
                        package_order_id: 0,
                        package_order_title: '',
                        ReferenceNo: '',
                        customer_name: '',
                        customer_phone: '',
                        package_order_total_amount: 0,
                        dep_date: '',
                        ElevyStampNo: '',
                        WorkAreaShortName: '',
                        WorkAreaLicNo: '',
                        ElevyStampAmount: 0,
                        ElevyStampCreateTime: '',
                        ElevyStampUrl: '',
                        ElevyStampStatus: 'pending',
                        RefundTime: ''
                    };
                },
                viewElevy(item) {
                    window.open(item.ElevyStampUrl, '_blank');
                },
                canRefund(item) {
                    return item.ElevyStampStatus === 'active';
                },
                async handleRefund(item) {
                    if (!confirm('确定要退款吗？')) return;
                    
                    try {
                        await window.apiClient.post(`/api/elevy-stamps/${item.ID}/refund`);
                        this.loadElevyList();
                    } catch (error) {
                        console.error('退款失败:', error);
                        alert('退款失败');
                    }
                },
                handleLogout() {
                    auth.logout();
                }
            }
        });
    </script>
</body>
</html> 